import { useEditor, EditorContent } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'
import { useEffect } from 'react'

const TiptapEditorComplete = () => {
  const editor = useEditor({
    extensions: [StarterKit],
    content: '<p></p>' // 初始为空
  })

  // 组件挂载时插入高亮词
  useEffect(() => {
    if (editor) {
      // 在编辑器最前面插入高亮内容
      editor.commands.insertContent(`
        <div style="background-color: #3b82f6; color: white; padding: 6px 10px; border-radius: 4px; margin-bottom: 8px; display: inline-block; font-weight: bold;">
          AI编程
        </div>
      `)
    }
  }, [editor])

  return (
    <div style={{ border: '1px solid #e2e8f0', borderRadius: '8px' }}>
      <div style={{ padding: '16px', minHeight: '200px' }}>
        <EditorContent editor={editor} />
      </div>
    </div>
  )
}

export default TiptapEditorComplete
